<template>
  <div v-if="visible" class="salaryDatePick" @click.stop="cancel">
    <!--<div>当前选中值:{{month}}</div>
    <div>当前选中值:{{month}}<type="cycle"/div>
    <div>当前选中值:{{day}}</div>-->
    <div class="confirmBtn" @click.stop>
        <span class="lf btn" @click="cancel">取消</span>
        <span class="rt btn" @click="confirm">查询</span>
    </div>
    <pd-select-box style="position: fixed;bottom: 0rem;width: 100%" @click.stop.native>
      <pd-select-item :listData="listData1" v-model="yearOne"></pd-select-item>
      <pd-select-item :listData="listData"  v-model="monthOne"></pd-select-item>
      
      <pd-select-item :listData="listData1" v-model="yearTwo"></pd-select-item>
      <pd-select-item :listData="listData"  v-model="monthTwo"></pd-select-item>
      <!--<pd-select-item :listData="listData2" type="cycle" v-model="day"></pd-select-item>-->
    </pd-select-box>
  </div>
</template>
<script>
  import Vue from 'vue'
  import pdSelectItem from './selectitem.vue'
  import pdSelectBox from './slectBox.vue'
  export default{
    name: 'pdIosSelect',
    data () {
      return {
        listData: Array.from({length: 12}, (value, index) => (1 + index)+"月"),
        listData2: Array.from({length: 30}, (value, index) =>  (1 + index)+'日'),
        listData1:Array.from({length: 3}, (value, index) =>  (index+2017)+'年'),
        monthOne: null,
        day: '2日',
        yearOne:null,
        monthTwo:null,
        yearTwo:null,

        
      }
    },
    methods:{
        cancel:function(){

            this.$emit('update:visible',false);
        },
        confirm:function(){
            this.$emit("input",this.yearOne + this.monthOne +"-"+ this.yearTwo + this.monthTwo);
            
            Vue.nextTick(()=>{
                this.$emit("search");
                this.$emit('update:visible',false);
            })
            
        },

    },
    watch:{
        // yearOne:function(newVal,oldVal){
        //     this.$emit("input",this.yearOne + this.monthOne +"-"+ this.yearTwo + this.monthTwo);
        // },
        // monthOne:function(newVal,oldVal){
        //     this.$emit("input",this.yearOne + this.monthOne +"-"+ this.yearTwo + this.monthTwo);
        // },
        // yearTwo:function(newVal,oldVal){
        //     this.$emit("input",this.yearOne + this.monthOne +"-"+ this.yearTwo + this.monthTwo);
        // },
        // monthTwo:function(newVal,oldVal){
        //     this.$emit("input",this.yearOne + this.monthOne +"-"+ this.yearTwo + this.monthTwo);
        // },
        value:function(newVal,olaVal){
            if (!newVal) {
                return;
            }    

            console.log(newVal,'valueWatch');
            let arr = newVal.split("-");
            if (arr.length === 1){
                this.yearOne = arr[0].slice(0,arr[0].indexOf("年")+1);
                this.monthOne = arr[0].slice(arr[0].indexOf("年")+1);
                this.yearTwo = this.yearOne;
                this.monthTwo = this.monthOne;
            } else {

            }
        }

    },
    components: {
      pdSelectItem,
      pdSelectBox
    },
    created:function(){
        console.log(this.value,'created');
        if (!this.value) {
            return;
        }

        let arr = this.value.split("-");
        if (arr.length === 1){
            this.yearOne = arr[0].slice(0,arr[0].indexOf("年")+1);
            this.monthOne = arr[0].slice(arr[0].indexOf("年")+1);
            this.yearTwo = this.yearOne;
            this.monthTwo = this.monthOne;
        } else {
            this.yearOne = arr[0].slice(0,arr[0].indexOf("年")+1);
            this.monthOne = arr[0].slice(arr[0].indexOf("年")+1);
            this.yearTwo =  arr[1].slice(0,arr[0].indexOf("年")+1);
            this.monthTwo = arr[1].slice(arr[0].indexOf("年")+1);
        }
    },
    mounted:function(){
        // if (this.value) {
        //     return;
        // }
        // let arr = this.value.split("-");
        // if (arr.length === 1){
        //     this.yearOne = arr[0].slice(0,arr[0].indexOf("年")+1);
        //     this.monthOne = arr[0].slice(arr[0].indexOf("年")+1);
        //     this.yearTwo = this.yearOne;
        //     this.monthTwo = this.monthOne;
        // } else {

        // }
    },
    props:{
      visible:{
          type:Boolean,
          default:false
      },
      value:{}
    }
  }
</script>
<style scoped lang='less'>
  .salaryDatePick{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background:rgba(162,164,163,0.3);
  }
  .confirmBtn{
    position: fixed;
    bottom: 4rem;
    height:0.7rem;
    background-color:#fff;
    line-height:0.7rem;
    width: 100%;
    border-bottom:0.02rem solid #eee;
    .btn{
       color:#38a0dc;
       width:0.8rem;
       margin:auto 0.2rem;
       font-size:0.4rem;
       height:0.6rem;
    }
  }
</style>
